<template>
  <div style="width: 100%;height: 100%;">
    <div class="mapcon">
      <PlatformHeader />
      <div class="breadcrumb">
        <Bread
          :items="breadcrumbItems"
          @item-click="handleBreadcrumbClick"
        />
      </div>
      <div style="flex: 1;display: flex">
        <div style="width: 300px;height: 100%; display: flex; align-items: center; justify-content: center;">
          <div
            class="stat-box leftbox"
            @mouseenter="handleMouseEnter('left')"
            @mouseleave="handleMouseLeave('left')"
            :style="{ backgroundImage: leftBoxBg }"
          >
            <div style="height: 60px;line-height: 60px;color: #e6e6e6;text-align: center;">今日上传人数:</div>
            <div style="height: 40px;line-height: 40px;text-align: center;font-weight: bold" class="stat-value">{{ total }}<span></span></div>

            <div class="stats-overlay" v-show="showLeftStats">
              <div class="stat-item">
                <img :src="maleIcon" class="gender-icon" alt="男性">
                <span class="stat-value1">{{ totalman }}</span>
              </div>
              <div class="stat-item">
                <img :src="femaleIcon" class="gender-icon" alt="女性">
                <span class="stat-value2">{{ totalwoman }}</span>
              </div>
            </div>
          </div>
        </div>
        <div style="flex: 1;">
          <Map
            :currentMapCode="currentMapCode"
            :currentMap="currentMap"
            :mapData="mapData"
            @city-click="handleCityClick"
          />
        </div>
        <div style="width: 300px;height: 100%; display: flex; align-items: center; justify-content: center;">
          <div
            class="stat-box rightbox"
            @mouseenter="handleMouseEnter('right')"
            @mouseleave="handleMouseLeave('right')"
            :style="{ backgroundImage: rightBoxBg }"
          >
            <div style="height: 60px;line-height: 60px;color: #e6e6e6;text-align: center;">累计上传人数:</div>
            <div style="height: 40px;line-height: 40px;text-align: center;font-weight: bold" class="stat-value">{{ yeartotal }}<span></span></div>

            <div class="stats-overlay" v-show="showRightStats">
              <div class="stat-item">
                <img :src="maleIcon" class="gender-icon" alt="男性">
                <span class="stat-value1">{{ yeartotalman }}</span>
              </div>
              <div class="stat-item">
                <img :src="femaleIcon" class="gender-icon" alt="女性">
                <span class="stat-value2">{{ yeartotalwoman }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Bread from '../components/Bread';
import PlatformHeader from '../components/PlatformHeader';
import Map from '../components/Map/index';
import { getUserProfile } from "@/api/system/user";
import { getDept } from "@/api/system/dept";
import { gettotal, getnexttotalbyday } from "@/api/fullscreen/homepage";

// 导入图片资源
import leftBg from './assets/images/rightren1.png';
import rightBg from './assets/images/leftren1.png';
import maleIcon from './assets/images/male.png';
import femaleIcon from './assets/images/female.png';
import bg1 from './assets/images/bg1.png';
import hoverBg from './assets/images/hoverbg.png';

export default {
  name: 'WhiteName',
  components: {
    Bread,
    PlatformHeader,
    Map
  },
  data() {
    return {
      breadcrumbItems: [],
      total: 0,
      totalman: 0,
      totalwoman: 0,
      yeartotal: 0,
      yeartotalman: 0,
      yeartotalwoman: 0,
      user: {},
      queryParams: {
        year: '',
        testtime: '',
        deptid: '',
        city: '',
        tablename: '',
        organizationCode: ''
      },
      year: '',
      testtime: '',
      deptid: '',
      organizationCode: '',
      currentMap: 'china',
      currentMapCode: '000000',
      mapData: [],
      showLeftStats: false,
      showRightStats: false,
      leftBoxBg: `url(${leftBg})`,
      rightBoxBg: `url(${rightBg})`,
      // 图片资源
      maleIcon,
      femaleIcon,
      bg1,
      hoverBg
    }
  },
  created() {
    this.testtime = this.formattedDate();
    this.year = new Date().getFullYear();
  },
  mounted() {
    this.initData();
  },
  methods: {
    handleMouseEnter(type) {
      if (type === 'left') {
        this.showLeftStats = true;
        this.leftBoxBg = 'none';
      } else {
        this.showRightStats = true;
        this.rightBoxBg = 'none';
      }
    },
    handleMouseLeave(type) {
      if (type === 'left') {
        this.showLeftStats = false;
        this.leftBoxBg = `url(${leftBg})`;
      } else {
        this.showRightStats = false;
        this.rightBoxBg = `url(${rightBg})`;
      }
    },
    async initData() {
      try {
        await this.getUser();
        this.resetQueryParams();
        this.queryParams.year = this.year;
        this.queryParams.deptid = this.deptid;
        this.queryParams.organizationCode = this.organizationCode;

        const response = await gettotal(this.queryParams);


        if(response.message == true){

          this.yeartotal = response.data.total;
          this.yeartotalman = response.data.totalman;
          this.yeartotalwoman = response.data.totalwoman;

        }else {

          this.$message.error(response.message);
        }



        this.queryParams.testtime = this.testtime;
        const response1 = await gettotal(this.queryParams);

        if(response1.message == true){

          this.total = response1.data.total;
          this.totalman = response1.data.totalman;
          this.totalwoman = response1.data.totalwoman;

        }else {

          this.$message.error(response1.message);
        }


        const response2 = await getnexttotalbyday(this.queryParams);
        if(response2.message == true){

        }else {
          this.$message.error(response.message);
        }

        this.mapData = response2.data;
      } catch (error) {
        console.error('初始化数据失败:', error);
      }
    },
    handleCityClick(cityName) {
      this.resetQueryParams();
      this.queryParams.year = this.year;
      this.queryParams.city = cityName;
      gettotal(this.queryParams).then(response => {
        if(response.message == true){

          this.yeartotal = response.data.total;
          this.yeartotalman = response.data.totalman;
          this.yeartotalwoman = response.data.totalwoman;

        }else {

          this.$message.error(response.message);
        }
      });
      this.queryParams.testtime = this.testtime;
      gettotal(this.queryParams).then(response => {
        if(response.message == true){

          this.total = response.data.total;
          this.totalman = response.data.totalman;
          this.totalwoman = response.data.totalwoman;

        }else {

          this.$message.error(response.message);
        }

      });
      getnexttotalbyday(this.queryParams).then(response => {
        if(response.parameter && response.message == true){
          let orgCode = response.parameter.organizationCode.padEnd(6, '0');
          this.organizationCode = orgCode;
          this.currentMapCode = orgCode;
          this.currentMap = cityName;
          const exists = this.breadcrumbItems.find(item => item.value === orgCode);
          if (!exists) {
            this.breadcrumbItems.push({ value: orgCode, title: cityName });
          }
          this.mapData = response.data;
        }else{
          this.$message.error(response.message);
        }
      });
    },
    resetQueryParams() {
      this.queryParams = {
        year: '',
        testtime: '',
        deptid: '',
        city: '',
        organizationCode: ''
      };
    },
        tablename: '',
    handleBreadcrumbClick(clickedItem) {
      const index = this.breadcrumbItems.findIndex(item => item.value === clickedItem.value);
      if (index === -1) return;

      const isLastItem = index === this.breadcrumbItems.length - 1;
      if (!isLastItem) {
        this.breadcrumbItems = this.breadcrumbItems.slice(0, index + 1);
        let cityName = clickedItem.title;
        this.resetQueryParams();
        this.queryParams.year = this.year;
        this.queryParams.city = cityName;
        gettotal(this.queryParams).then(response => {
          if(response.message == true){

            this.yeartotal = response.data.total;
            this.yeartotalman = response.data.totalman;
            this.yeartotalwoman = response.data.totalwoman;

          }else {

            this.$message.error(response.message);
          }
        });
        this.queryParams.testtime = this.testtime;
        gettotal(this.queryParams).then(response => {
          if(response.message == true){

            this.total = response.data.total;
            this.totalman = response.data.totalman;
            this.totalwoman = response.data.totalwoman;

          }else {

            this.$message.error(response.message);
          }
        });
        getnexttotalbyday(this.queryParams).then(response => {
          if(response.parameter && response.message == true){
            let orgCode = response.parameter.organizationCode.padEnd(6, '0');
            this.organizationCode = orgCode;
            this.currentMapCode = orgCode;
            this.currentMap = cityName;
            this.mapData = response.data;
          }else{
            this.$message.error(response.message);
          }
        });
      }
    },
    formattedDate() {
      const date = new Date();
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    getUser() {
      return new Promise((resolve, reject) => {
        getUserProfile().then(response => {
          this.user = response.data;
          this.deptid = response.data.deptId;
          //console.log(response)
          getDept(response.data.deptId).then(deptResponse => {
            //console.log(deptResponse)
            const orgCode = String(deptResponse.data.organizationcode).substring(0, 6).padEnd(6, '0');
            const deptName = deptResponse.data.deptName;
            this.breadcrumbItems = [{ value: orgCode, title: deptName }];
            this.currentMapCode = orgCode;
            this.currentMap = deptName;
            this.organizationCode = orgCode;
            resolve();
          }).catch(error => {
            reject(error);
          });
        }).catch(error => {
          reject(error);
        });
      });
    }
  }
}
</script>

<style scoped>
.mapcon {
  background: url('./assets/images/bgc.png') no-repeat top center;
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
  line-height: 1.15;
  display: flex;
  flex-direction: column;
  padding: 0px;
  padding-top: 0;
}

.breadcrumb {
  width: 100%;
  height: 60px;
  line-height: 60px;
  font-size: 24px;
  color: #e6e6e6;
  text-align: center;
  margin-top: 10px;
}

.stat-box {
  margin-top: -75px;
  width: 300px;
  height:228px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: relative;
  cursor: pointer;
  font-size: 24px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  /*justify-content: center;*/
}

.leftbox {
  /*background-image: url('./assets/images/rightren1.png');*/
}

.rightbox {
  /*background-image: url('./assets/images/leftren1.png');*/
}

.stat-box:hover {
  transform: scale(1.05);
}

.stats-overlay {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 232px;
  height: 115px;
  background: url('./assets/images/hoverbg.png') no-repeat;
  background-size: contain;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 26px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stat-box:hover .stats-overlay {
  opacity: 1;
}

.stat-item {
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.gender-icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.stat-value {
  font-weight: bold;
  color: #ffcc00;
  font-size: 38px;
}
.stat-value1 {
  font-weight: bold;
  color: #43fefa;
}
.stat-value2 {
  font-weight: bold;
  color: #fde04a;
}
</style>
